<template>
  <a-spin :spinning="confirmLoading">
    <!-- 主表单区域 -->
    <a-form :form="form">
      <a-row>

        <a-col :xs="24" :sm="12">
          <a-form-item label="单据编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input  disabled="true" v-decorator="['orderCode']" placeholder="系统自动生成"></a-input>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12">
          <a-form-item label="入库部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-select-depart v-decorator="['putDepartment', validatorRules.putDepartment]"></j-select-depart>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12">

          <a-form-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-search-select-tag v-decorator="['storage', validatorRules.storage]"
                                 :trigger-change="true" dict="zcgl_asset_fixed_category,name,id"
                                 :disabled="disableSubmit"
                                 placeholder="请选择仓库"/>

          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12">
          <a-form-item label="制单人" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-search-select-tag v-decorator="['putUser', validatorRules.putUser]"
                                 :trigger-change="true" dict="sys_user,username,id" :disabled="disableSubmit"
                                 placeholder="请选择制单人"/>
            <!--              <j-select-assets></j-select-assets>-->
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12">
          <a-form-item label="请选择资产" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-select-assets @change="handleView($event,props)"></j-select-assets>
          </a-form-item>
        </a-col>
        <a-col  :xs="24" :sm="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="验收单">
            <!--            <a-input placeholder="请输入图片" v-decorator="['image', {}]" />-->
            <!--            <j-image-upload  v-decorator="['image', {}]"></j-image-upload>-->
            <j-image-upload text="上传" v-decorator="['image', {}]" :isMultiple="true" :number="6"></j-image-upload>
          </a-form-item>

        </a-col>

        <!--          {{ this.zcglPutStorageAssetsTable.dataSource}}-->
        <!--          <button @click="add1()">添加数据</button>-->
      </a-row>
    </a-form>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="入库的物资明细表" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="zcglPutStorageAssetsTable.loading"
          :columns="zcglPutStorageAssetsTable.columns"
          :dataSource="zcglPutStorageAssetsTable.dataSource"
          :maxHeight="300"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>

    </a-tabs>

  </a-spin>
</template>
<script>

import pick from 'lodash.pick'
import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JSelectDepart from '../../../components/jeecgbiz/JSelectDepart'
import JSearchSelectTag from '../../../components/dict/JSearchSelectTag'
import JSelectAssets from '../../../components/jeecgbiz/JSelectAssets'
import JImageUpload from '../../../components/jeecg/JImageUpload'

export default {
  name: 'ZcglPutAssetInfo',
  mixins: [JEditableTableMixin],
  components: {
    JSearchSelectTag,JSelectDepart,JSelectAssets,JImageUpload

  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      disableSubmit: false,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        putDepartment: {
          rules: [
            { required: true, message: '请输入入库部门!'},
          ]
        },
        storage: {
          rules: [
            { required: true, message: '请输入入库的仓库!'},
          ]
        },
      },
      refKeys: ['zcglPutStorageAssets', ],
      tableKeys:['zcglPutStorageAssets', ],
      activeKey: 'zcglPutStorageAssets',
      // 入库的物资明细表
      zcglPutStorageAssetsTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '物资',
            key: 'assetId',
            type: FormTypes.select,
            dictCode: 'zcgl_asset_fixed,name,id',
            width: '200px',
            placeholder: '请选择${title}',
            valueExclude: [1, 20, 80],
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            disabled: true,
            title: '物资类别',
            key: 'assetType',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '物资规格',
            key: 'assetSpecifications',
            type: FormTypes.input,
            width: '200px',
            disabled: true,
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '单位',
            key: 'assetUnit',
            type: FormTypes.input,
            width: '100px',
            disabled: true,
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            disabled: true,
            title: '单价',
            key: 'assetPrice',
            type: FormTypes.inputNumber,
            width: '100px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '数量',
            key: 'assetAmount',
            type: FormTypes.inputNumber,
            width: '150px',
            placeholder: '请输入${title}',
            defaultValue: '',
            jisuan: true,
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '合计',
            key: 'total',
            type: FormTypes.normal,
            width: '150px',
            defaultValue: '',

          },
        ]
      },
      url: {
        add: "/putstorage/zcglPutStorage/add",
        edit: "/putstorage/zcglPutStorage/edit",
        zcglPutStorageAssets: {
          list: '/putstorage/zcglPutStorage/queryZcglPutStorageAssetsByMainId'
        },
      }
    }
  },
  methods: {
    /** 调用完edit()方法之后会自动调用此方法 */
    showModal(r) {
      this.model = Object.assign({}, r)
      let fieldval = pick(this.model,'orderCode','putDepartment','storage','putUser','processStatus','processStatusTxt','image')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      setTimeout(() => {
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.zcglPutStorageAssets.list, params, this.zcglPutStorageAssetsTable)
        }
      }, 500);
    },

    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      let fieldval = pick(this.model,'orderCode','putDepartment','storage','putUser')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.zcglPutStorageAssets.list, params, this.zcglPutStorageAssetsTable)
      }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        zcglPutStorageAssetsList: allValues.tablesValue[0].values,
      }
    },
    validateError(msg){
      this.$message.error(msg)
    },
    popupCallback(row){
      this.form.setFieldsValue(pick(row,'orderCode','putDepartment','storage','putUser'))
    },

  }
}
</script>

<style scoped>
</style>